<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  
  <body>
    <div style="display:inline-block;width: 100px;height: 100px;background: skyblue"></div>
  </body>
  
  <script>
    /* 元素宽高 */
    console.log(document.querySelector('div').offsetWidth);//100
    console.log(document.querySelector('div').offsetHeight);//100
    
    /* body宽高 */
    console.log(window.document.body.offsetWidth);
    console.log(window.document.body.offsetHeight);
    
    /* 屏幕可用宽高 */
    console.log(screen.availWidth);//390
    console.log(screen.availHeight);//844
    
    /* 显示屏宽高 */
    console.log(document.documentElement.clientWidth);
    console.log(document.documentElement.clientHeight);
  </script>
</html>